<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit8</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/swiper-bundle.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="/css/reset.less">

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="/css/common.less">

    <!-- 独立样式 -->
    <link rel="stylesheet/less" href="/css/index.less">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4677206_69b6y8txmjy.css">
</head>

<body>
    <div class="warp">
        <nav class="navbar navbar-inverse nav-bg">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand logo" href="#">spirit8</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#banner">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#team">TEAM</a></li>
                        <li><a href="#services">SERVICES</a></li>
                        <li><a href="#clients">CLIENTS</a></li>
                        <li><a href="#work">WORK</a></li>
                        <li><a href="#test">TEST</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div id="banner">
            <h3>WELCOME on <span>spirit8</span></h3>
            <p>We are a digital agency with <span>years of experience</span> and <span>with extra</span></p>
            <div class="arrow">
                <a href="#footer">
                    <img src="images/33-spirit8-digital-agency_03.png" alt="">
                </a>
            </div>
        </div>

        <div id="about">
            <div class="about-box">
                <div class="left">
                    <img src="/images/913c3102050269b14e31e3bcde2fccb2.png" alt="">
                </div>
                <div class="right">
                    <h6>About us</h6>
                    <h3>Some words <span>about us</span></h3>
                    <div class="line"></div>
                    <div class="content">
                        We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                        illustration, we brand companies in a way they will never forget.
                    </div>

                    <ul>
                        <li>
                            <div class="icon">
                                <img src="/images/9d626d7b57238c7cf9cc2b4312c4ea60.png" alt="">
                            </div>
                            <div class="text">Mission - <span>We deliver uniqueness and quality</span></div>
                        </li>

                        <li>
                            <div class="icon">
                                <img src="/images/9d626d7b57238c7cf9cc2b4312c4ea60.png" alt="">
                            </div>
                            <div class="text">Skills - <span>Delivering fast and excellent results</span></div>
                        </li>

                        <li>
                            <div class="icon">
                                <img src="/images/9d626d7b57238c7cf9cc2b4312c4ea60.png" alt="">
                            </div>
                            <div class="text">Clients - <span>Satisfied clients thanks to our experience/span></div>
                        </li>

                    </ul>

                    <div class="about-btn">
                        <img src="/images/8ba7362ce59618da558d27e78fb1d4d8.png" alt="">
                        Browse our work
                    </div>

                </div>
            </div>
        </div>

        <div id="team">
            <h3>Meet <span>our team</span></h3>
            <div class="line"></div>
            <div class="line2"></div>

            <div class="swiper team-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="list">
                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>

                            <div class="item">
                                <img src="/images/微信图片3.jpg" alt="">
                                <div class="nickname">
                                    Jason Statham
                                    <p>Knife designer</p>
                                </div>
                                <div class="content">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>


            </div>
        </div>

        <div id="services">
            <div class="services-box">
                <div class="title">
                    <h3>take a look at <span>our services</span></h3>
                    <div class="line"></div>
                    <div class="line2"></div>
                </div>
                <div class="txt">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.
                </div>
                <div class="list">
                    <div class="item">
                        <div class="picture">
                            <img src="/images/Forma 1.png" alt="">
                        </div>
                        <h5>Web design </h5>
                        <div class="introduce">
                            he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>
                    <div class="item">
                        <div class="picture">
                            <img src="/images/Forma 1.png" alt="">
                        </div>
                        <h5>Web design </h5>
                        <div class="introduce">
                            he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>
                    <div class="item">
                        <div class="picture">
                            <img src="/images/Forma 1.png" alt="">
                        </div>
                        <h5>Web design </h5>
                        <div class="introduce">
                            he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>
                    <div class="item">
                        <div class="picture">
                            <img src="/images/Forma 1.png" alt="">
                        </div>
                        <h5>Web design </h5>
                        <div class="introduce">
                            he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="clients">
            <div class="clients-box">
                <h3>SOME OF<span> OUR CLIENTS</span></h3>
                <div class="line"></div>
                <div class="line2"></div>
                <div class="swiper clients-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="list">
                                <img src="/images/Layer 69.png" alt="">
                                <img src="/images/Layer 65.png" alt="">
                                <img src="/images/Layer 68.png" alt="">
                                <img src="/images/Layer 67.png" alt="">
                                <img src="/images/Layer 64.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list">
                                <img src="/images/Layer 69.png" alt="">
                                <img src="/images/Layer 65.png" alt="">
                                <img src="/images/Layer 68.png" alt="">
                                <img src="/images/Layer 67.png" alt="">
                                <img src="/images/Layer 64.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list">
                                <img src="/images/Layer 69.png" alt="">
                                <img src="/images/Layer 65.png" alt="">
                                <img src="/images/Layer 68.png" alt="">
                                <img src="/images/Layer 67.png" alt="">
                                <img src="/images/Layer 64.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <div id="work">
            <div class="work-box">
                <div class="title">
                    <h3>take a look at <span>our work</span></h3>
                    <div class="line"></div>
                    <div class="line2"></div>
                </div>
                <div class="txt">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.
                </div>
                <div class="middle">
                    <div class="left">
                        Filter by type
                    </div>
                    <div class="right ">
                        <ul class="breadcrumb right-bar">
                            <li class="active"><a href="#">All</a></li>
                            <li><a href="#">Web design</a></li>
                            <li><a href="#">Mobile design</a></li>
                            <li><a href="#">Photograpy</a></li>
                        </ul>
                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                data-toggle="dropdown"><i class="iconfont icon-duolanmingxizhang"></i>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">All</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">Web design</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">Mobile design</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">Photograpy</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                    <img src="/images/Layer 83.png" alt="">
                </div>
            </div>
        </div>

        <div id="test">
            <div class="test-box">
                <h3><span>our clients’ </span>testimonials</h3>
                <div class="line"></div>
                <div class="line2"></div>
                <div class="swiper test-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="txt">
                                This book is a treatise on the theory of ethics, very popular during the Renaissance.
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                                section 1.10.32.
                            </div>
                            <div class="txt-bottom">
                                Dean Martin, CEO Acme Inc.
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="txt">
                                This book is a treatise on the theory of ethics, very popular during the Renaissance.
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                                section 1.10.32.
                            </div>
                            <div class="txt-bottom">
                                Dean Martin, CEO Acme Inc.
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="txt">
                                This book is a treatise on the theory of ethics, very popular during the Renaissance.
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                                section 1.10.32.
                            </div>
                            <div class="txt-bottom">
                                Dean Martin, CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <div id="contact">
            <div class="contact-box">
                <div class="title">
                    <h3>feel free to contact us </h3>
                    <div class="line"></div>
                    <div class="line2"></div>
                </div>
                <div class="txt">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.

                </div>
                <div class="content">
                    <div class="top">
                        <div class="left">
                            <p>Name<span>*</span></p>
                            <input type="text" id="name">
                        </div>
                        <div class="right">
                            <p>Email address<span>*</span></p>
                            <input type="text" id="email">
                        </div>
                    </div>
                    <div class="bottom">
                        <p>Message<span>*</span></p>
                        <input type="text" id="message">
                    </div>
                    <button class="btn">SEND</button>
                </div>
            </div>
        </div>

        <div id="foot">
            <div class="foot-box">
                <div class="left">
                    ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8
                </div>
                <div class="right">
                    <i class="iconfont icon-feishu"></i>
                    <i class="iconfont icon-feishu"></i>
                    <i class="iconfont icon-feishu"></i>   
                    <i class="iconfont icon-feishu"></i>
                </div>
            </div>
        </div>

    </div>

</body>

</html>
<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/less.min.js"></script>
<script>

    var mySwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

    })

    var mySwiper = new Swiper('.clients-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })

    var mySwiper = new Swiper('.test-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })


    // 锚点跳转滑动效果
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function () {
        // alert(1) // js原生提示框
        // 获取当前url
        // console.log(location.hostname) // 获取主机名
        // console.log(location.pathname.replace(/^\//,''));
        // console.log(this.innerText);
        // a == 1 => 判断值是否相等
        // === => 判断值以及数据类型是否相等 
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
            //获取将要跳转的锚点位置
            // console.log(this.hash)
            var $target = $(this.hash);
            // console.log($target)

            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

            // 一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length) {
                // 获取目标元素的位置
                var targetOffset = $target.offset().top - 50;

                // 让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }

        }
    })
</script>